    <style include="settings-shared"></style>
    <settings-animated-pages id="pages" current-route="{{currentRoute}}"
        section="a11y" focus-config="[[focusConfig_]]">
      <div route-path="default">
<if expr="chromeos">
        <cr-link-row
            label="$i18n{manageAccessibilityFeatures}"
            on-click="onManageSystemAccessibilityFeaturesTap_"
            sub-label="$i18n{moreFeaturesLinkDescription}" external>
        </cr-link-row>
</if>
<if expr="not chromeos">
        <template is="dom-if" if="[[captionSettingsOpensExternally_]]">
          <template is="dom-if" if="[[enableLiveCaption_]]">
            <settings-live-caption prefs="{{prefs}}"></settings-live-caption>
          </template>
          <cr-link-row id="captions"
              label="$i18n{captionsPreferencesTitle}"
              sub-label="$i18n{captionsPreferencesSubtitle}"
              on-click="onCaptionsClick_"
              external$="[[captionSettingsOpensExternally_]]">
          </cr-link-row>
        </template>
        <template is="dom-if" if="[[!captionSettingsOpensExternally_]]">
          <cr-link-row id="captions"
              label="$i18n{captionsTitle}"
              on-click="onCaptionsClick_"
              role-description="$i18n{subpageArrowRoleDescription}">
          </cr-link-row>
        </template>
        <settings-toggle-button
            class="hr"
            hidden$="[[!showFocusHighlightOption_]]"
            pref="{{prefs.settings.a11y.focus_highlight}}"
            on-setting-boolean-control-change="onFocusHighlightChange_"
            label="$i18n{focusHighlightLabel}">
        </settings-toggle-button>
        <settings-toggle-button
            class="hr"
            pref="{{prefs.settings.a11y.caretbrowsing.enabled}}"
            on-change="onA11yCaretBrowsingChange_"
            label="$i18n{caretBrowsingTitle}"
            sub-label="$i18n{caretBrowsingSubtitle}">
        </settings-toggle-button>
</if>
        <settings-toggle-button
            class="hr"
            hidden$="[[!showAccessibilityLabelsSetting_]]"
            pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
            on-change="onA11yImageLabelsChange_"
            label="$i18n{accessibleImageLabelsTitle}"
            sub-label="$i18n{accessibleImageLabelsSubtitle}">
        </settings-toggle-button>
        <cr-link-row class="hr" label="$i18n{moreFeaturesLink}"
            on-click="onMoreFeaturesLinkClick_" sub-label="$i18n{a11yWebStore}"
            external>
        </cr-link-row>
      </div>
<if expr="not chromeos">
      <template is="dom-if" if="[[!captionSettingsOpensExternally_]]">
        <template is="dom-if" route-path="/captions">
          <settings-subpage
              associated-control="[[$$('#captions')]]"
              page-title="$i18n{captionsTitle}">
            <settings-captions prefs="{{prefs}}"></settings-captions>
          </settings-subpage>
        </template>
      </template>
</if>
    </settings-animated-pages>
